/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useState } from 'react';
import { Radio, Modal, Col, Row, message, Input } from 'antd';
import { getRanString, modalColumns } from '../utils';
import { noop } from 'lodash';

interface RejectModalType {
  onCancel?: any;
  onok?: any;
  visible?: boolean;
  title?: string;
  width?: number;
  type?: string;
  svipStatus: boolean;
  mastRadio?: boolean;
}

const TemRejectModal = (props: RejectModalType) => {
  const { onok, svipStatus, mastRadio = true, visible, ...rest } = props;
  const [redioValue, setRedioValue] = useState('');
  const [inputValue, setInputValue] = useState('');
  const pageType = rest.type;

  const onChange = (event: any) => {
    setRedioValue(event.target.value);
  };
  const onChangeInput = (event: any) => {
    setInputValue(event.target.value);
  };
  const onHandle = () => {
    if (mastRadio && !redioValue) {
      message.error(props.title);
      return;
    }
    onok({
      inputValue: inputValue,
      reason: redioValue,
      ...rest,
    });
    setRedioValue('');
  };

  useEffect(() => {
    setInputValue('');
    setRedioValue('');
  }, [visible]);
  return (
    <Modal destroyOnClose centered {...props} visible={visible} onOk={onHandle}>
      {pageType == 'black' && (
        <Row align={'middle'} justify={'start'}>
          1、确定拒绝此模板？请选择拒绝原因：
        </Row>
      )}
      {modalColumns(svipStatus).map((item) => (
        <Row
          align={'middle'}
          justify={pageType == 'black' ? 'start' : 'center'}
          key={getRanString()}
          style={{ margin: '15px 0' }}
        >
          <Col offset={1}>{item.label}</Col>
          <Col offset={3}>
            <Radio checked={redioValue == item.value} onChange={onChange} value={item.value} />
          </Col>
        </Row>
      ))}
      {svipStatus ? (
        <Input
          onChange={onChangeInput}
          style={{ display: 'flex', width: '90%', margin: '0 auto' }}
          placeholder='请输入拒绝原因，方便用户修改'
        ></Input>
      ) : null}
      {pageType == 'black' && (
        <Row align={'middle'} justify={'start'}>
          2、拉黑后该账号将无法向客户发送短信、云呼、微信通知
        </Row>
      )}
    </Modal>
  );
};

TemRejectModal.defaultProps = {
  title: '',
  onCancel: noop,
  onok: noop,
  visible: false,
  width: 300,
  svipStatus: false,
};

export default TemRejectModal;
